<template>
  <div class="bindBox mb16">
    <div class="bindDiolag bgf">
      <div class="bindDialogTitle">
        <el-button size="small" class="goback" type="primary" @click="goBack">返回</el-button>
        <p class="tit">绑定展位管理</p>
      </div>
      <div v-for="item in boothList" :key="item.imListId" class="bindDialogItem flex j-sb a-c">
        <div>
          <p class="bindTit">{{ item.imCom }}</p>
          <p class="bindPosition">角色：{{ item.roleName }}</p>
        </div>
        <div class="flex j-fe w200">
          <div class="btnBindColor bind mr24">
            <div>
              <i class="el-icon-connection" style="font-size:14px;" />
              <el-button type="text" @click="unbindBooth(item)">解除绑定</el-button>
            </div>
          </div>
          <div class="btnBindColor default">
            <div v-if="item.isDefault == 0">
              <i class="el-icon-edit" style="font-size:14px;" />
              <el-button type="text" @click="setDefaultCompanyChange(item)">设为默认展位</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api'
export default {
  data() {
    return {
      boothList: []
    }
  },
  mounted() {},
  created() {
    this.getBoothList()
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async getBoothList() {
      const { data } = await api.boss.getCompanyListByUserInfo()
      this.boothList = data
    },
    async setDefaultCompanyChange(data) {
      const params = {
        imListId: data.imListId
      }
      await api.boss.setDefaultCompany(params)
      this.getBoothList()
    },
    async unbindBooth(data) {
      if (data.roleId == -1) {
        return this.$message.warning('请更换超级管理员，在操作解除绑定'), false
      }

      const params = {
        imListId: data.imListId
      }
      if (data.current === 1) {
        this.$confirm('解除当前展位，将会退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await api.boss.removeBind(params)
          await this.$store.dispatch('user/logout')
          this.$router.push(`/login?type=sign&redirect=${this.$route.query.redirect}`)
        }).catch(() => {})
      } else {
        this.$confirm('是否解除绑定此展位?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await api.boss.removeBind(params)
          this.getBoothList()
        }).catch(() => {})
      }
    }
  }
}
</script>
<style scoped>
.bindBox{
  margin-top: 16px;
}
.bindDiolag{
  width: 1200px;
  margin: 0 auto;
  padding: 32px;
}
.bindDialogTitle{
  position: relative;
  text-align: center;
  margin-bottom: 22px;
}
.bindDialogTitle .tit{
  font-size: 18px;
  font-weight: 500;
  color: #202933;
}
.goback{
  position: absolute;
  top: 0;
  left: 0;
}
.j-sb{
  justify-content: space-between;
}
.j-fs{
  justify-content: flex-start;
}
.j-fe{
  justify-content: flex-end;
}
.btnBindColor{
  font-size: 16px;
  color: #0C7FF2;
  font-weight: 400;
}
.btnBindColor.bind{
  width: 75px;
}
.btnBindColor.default{
  width: 100px;
}
.btnBindColor .el-button{
  font-weight: 400;
}
.bindDialogItem{
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #E5EAF0;
}
.bindDialogItem .bindTit{
  font-size: 14px;
  font-weight: 400;
  color: #202933;
  margin-bottom: 8px;
}
.bindDialogItem .bindPosition{
  font-size: 14px;
  font-weight: 400;
  color: #7E8790;
}
.mr24{
  margin-right: 24px;
}
</style>
